<template>
    <!-- 公告 -->
    <div>
        <div class="space-between v-center mb-4">
            <span class="page-title v-center d-flex mb-0">公告</span>
            <el-link type="primary" @click="go('/workbench/annoucement')">更多...</el-link>
        </div>
        <div class="remark align-center" v-if="!announcements.length">暂无记录</div>
        <div class="items">
            <div v-for="(item, idx) in announcements" class="d-flex" @click="showAnnouncement(item)">
                <div class="mr-1">{{ idx + 1 }}.</div>
                <el-text class="title mr-4 cursor-pointer flex-auto" truncated>{{ item.title }}</el-text>
                <div class="color-gray time-info">{{ item.createTime }}</div>
            </div>
        </div>

        <el-drawer title="公告详情" v-model="announcementVisible" size="600px" close-on-click-modal>
            <div class="annoucement">
                <label class="color-gray">公告标题</label>
                <p>{{ announcement.title }}</p>
                <label class="color-gray">公告内容</label>
                <p>{{ announcement.content }}</p>
                <label class="color-gray">发布时间</label>
                <p>{{ announcement.createTime }}</p>
            </div>

            <template #footer>
                <el-button @click="announcementVisible = false">关闭</el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const announcements = ref([]);
const announcementVisible = ref(false);
const announcement = ref({});
const router = useRouter();

onMounted(() => {
    app.https.post("/sys/announcement/query").then((resp) => {
        announcements.value = resp;
    });
});

function showAnnouncement(item) {
    announcement.value = item;
    announcementVisible.value = true;
}

function go(path) {
    router.push(path);
}
</script>
